<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 捐赠物详情组件
import DonationDetailComponent from './components/donation-detail.vue'
import { putCancelOrder } from '@/services/donationDetail'

// 捐赠物ID
const donationId = ref<number | null>(null)

// 页面加载时获取捐赠物ID
onLoad((options: any) => {
  if (options?.id) {
    donationId.value = Number(options.id)
  }
})

// 处理取消订单
const handleCancelOrder = async (id: number, reason: string) => {
  // 这里调用实际的取消订单API
  const res = await putCancelOrder({ id, cancelReason: reason })
  // 取消成功后发送刷新事件并返回上一页
  uni.showToast({
    title: '已取消订单',
    icon: 'success',
    success: () => {
      // 发送全局事件，通知需要刷新订单列表
      uni.$emit('refreshOrderList')

      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    },
  })
}

// 返回上一页
const handleClose = () => {
  uni.navigateBack()
}
</script>

<template>
  <view class="donation-detail-page">
    <DonationDetailComponent
      v-if="donationId"
      :donation-id="donationId"
      @close="handleClose"
      @cancel-order="handleCancelOrder"
    />
  </view>
</template>

<style lang="scss">
.donation-detail-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}
</style>
